<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改头像</title>
    <link rel="stylesheet" href="/stylesheets/personnal.css">
</head>
<body>
<!--导航-->
<%include nav.html%>
<div class="personnal_container">
    <div class="person_left">
    <%include personnal-left.html%>
    </div>
    <div class="person_right">
        <div class="editor_container">
            <div class="editor_header">
                <h3>个人资料</h3>
            </div>
            <div class="editor_nav">
                <a href="/users/editor-basic" class="ui-tab-btn">基本资料</a>
                <a href="/users/editor-icon" class="ui-tab-btn ui-tab-cur">修改头像</a>
            </div>
            <div class="editor_content">
                <div class="editor_section" id="editor_section2">
                    <div class="editor_icon">
                        <div class="upload_success">
                            <img src="" id="img" alt="">
                        </div>
                    </div>
                    <div class="icon_preview_con">
                        <div class=" ">
                            <h3>上传本地图片：</h3>
                            <p>传一张与爱宠的全家福作为头像吧~（文件小于2M，支持图片格式为jpg，png，gif）</p>
                        </div>
                        <form id="update_icon">
                            <div class="icon1">
                                <div class="icon_preview">
                                    <input type="file" value="上传图片" id='fileImage01' name="fileImage01">
                                </div>
                            </div>
                            <div class="icon1 btn_margin">
                                <input type="submit" value="保存" style="width: 100px;height: 40px;background-color: orange;outline: none;border: none">
                            </div>
                        </form>


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%include footer.html%>
<!--<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>-->
<script src="/js/jquery-1.8.3.js"></script>
<!--<script src="/javascripts/personnal.js"></script>-->
<script>
    $(function () {
        $(".editor_nav a").click(function () {
            $(this).addClass('ui-tab-cur').siblings().removeClass('ui-tab-cur');
        })
    });
</script>
<script>
    $(function () {
        $("#fileImage01").change(function(){
            var objUrl = getObjectURL(this.files[0]) ;
            console.log("objUrl = "+objUrl) ;
            if (objUrl) {
                $("#img").attr("src", objUrl) ;
            }
        }) ;
        $('#update_icon').submit(function () {
            if($('#img').attr('src')==''){
                alert('请添加图片');
                return false;
            }
            var formdata=new FormData($('#update_icon')[0]);
            $.ajax({
                type: 'POST',
                url:'/users/editor-icon',
                data:formdata,
                async:false,
                cache:false,
                contentType:false,
                processData:false,
                success: function (data) {
                    if(data.res==1){
                        alert('修改成功');
                        location.href='/users';
                    }else if(data.res==0){
                        alert('修改失败');
                        location.href='/editor_articles';
                    }else{
                        alert(data);
                    }
                },
                error: function (data) {
                    alert(data);
                }
            });
            return false;
        })

    });
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>

</body>
</html>